<template>
    <context-holder />
    <div class="container">
        <span class="title"> iDiu By WebRTC</span>
        <div class="wrapper">
            <div class="input-item">
                <p>输入一个临时用户名：</p>
                <a-input v-model:value="userName" placeholder=""></a-input>
            </div>
            <a-button class="btn" type="primary" @click="setName">进入</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useSocketStore } from "../stores/imsocket";
import { message } from "ant-design-vue";
import { v4 } from "uuid";
import router from "../router";
const [messageApi, contextHolder] = message.useMessage();
const socketStore = useSocketStore();
const userName = ref("");

onMounted(() => {
    // let username = window.localStorage.getItem("user");
    // let userid = window.localStorage.getItem("userid");
    // if (username && userid) {
    //     socketStore.setUser(username, userid);
    //     router.push({ name: "devices" });
    // }
});
const setName = () => {
    if (!userName.value || userName.value.length > 10) {
        messageApi.error("用户名不能为空！且小于10个字符！");
        return;
    }
    let uid = v4();
    window.localStorage.setItem("user", userName.value);
    window.localStorage.setItem("userid", uid);
    socketStore.userName = userName.value;
    socketStore.setUser(userName.value, uid);

    router.push({ name: "devices" });
};
</script>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #f6f8fa;
    .title {
        font-size: 24px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji";
        margin-bottom: 10px;
        color: #606266;
    }
    .wrapper {
        border-radius: 4px;
        padding: 24px 48px;
        box-shadow: 1px 1px 3px #909399;
        background-color: #fff;
    }
    .input-item {
        p {
            margin-bottom: 12px;
        }
    }
    .btn {
        margin-top: 24px;
        width: 182px;
    }
}
</style>
